<template>
  <el-form ref="formRef" class="yy-form y-flex y-gap-y-2 y-flex-wrap" :model="formData" size="small">
    <div v-for="(item, index) in formColumn" :key="item.prop" :data-index="index" class="y-w-full sm:y-w-1/2 md:y-w-[32%] lg:y-w-[25%] xl:y-w-[20%]  2xl:y-w-[16%]" v-show="hasShowFormItem(item, index)">
      <el-form-item class="y-w-full !y-flex" :label="item.label" :prop="item.prop">
        <component :is="item.component || 'yyInput'" v-if="item.component" v-bind="item" v-model="formData[item.prop]" @enter="onSubmit"></component>
      </el-form-item>
    </div>
    <div class="y-w-full sm:y-w-1/2 md:y-w-[33%] lg:y-w-[25%] xl:y-w-[20%]  2xl:y-w-[16%]">
      <el-form-item label=" ">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button v-if="flagShowMore && formColumn?.length > 1" :icon="expandMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" type="text" @click="toggleExpandMore">{{ expandMore ? '收起':'展开' }}</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import resize from "@/mixins/resize";
import componentMinxin from "./component/index";
export default {
  mixins: [resize, componentMinxin],
  props: {
    formColumn: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  name: "yyForm",
  computed: {
    formData: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      expandMore: false,
      flagShowMore: false,
      hiddenConfig: {
        start: 0,
        end: this.formColumn.length - 1,
      },
    };
  },
  methods: {
    toggleExpandMore() {
      this.expandMore = !this.expandMore;
      this.$emit("toggleExpandMore", this.expandMore);
    },
    hasShowFormItem(_, index) {
      if (!this.flagShowMore) return true;
      if (this.expandMore) return true;
      if (index >= this.hiddenConfig.start && index <= this.hiddenConfig.end)
        return false;
      return true;
    },
    onSubmit() {
      this.$emit("search");
    },
    onResize() {
      this.flagShowMore = false;
      this.$nextTick(() => {
        const prevDiv = this.isLineBreakBetweenDivs(
          this.$refs.formRef.$el.children
        );
        if (prevDiv) {
          this.flagShowMore = true;
          const start = +prevDiv.dataset.index;
          this.hiddenConfig.start = start === 0 ? 1 : start;
        } else {
          this.flagShowMore = false;
        }
      });
    },
    isLineBreakBetweenDivs(divs) {
      var threshold = 1; // 设置一个阈值，超过这个值认为发生了换行
      for (var i = 1; i < divs.length; i++) {
        var prevDiv = divs[i - 1];
        var currentDiv = divs[i];
        var prevBottom = prevDiv.offsetTop + prevDiv.offsetHeight;
        var currentTop = currentDiv.offsetTop;
        if (currentTop > prevBottom + threshold) {
          // 当前div的offsetTop超过前一个div的offsetTop加上阈值，则认为发生了换行
          return prevDiv;
        }
      }
      return; // 如果没有发生换行，返回false
    },
  },
};
</script>

<style lang="scss" scoped>
.yy-form {
  ::v-deep {
    .el-form-item__label {
      line-height: 32px;
      height: 32px;
      max-width: 80px;
      width: 100%;
    }
    .el-form-item {
      margin: 0;
    }
  }
}
</style>